<template>
  <div class="box">
    <el-form v-if="!judeg" :model="ruleForm" :rules="rules" :inline="false" ref="ruleForm" label-width="160px" class="demo-ruleForm" size="medium">
      <!-- <h2 class="tle">必填项：</h2> -->
      <div class="must">
        <el-form-item
          :label="special_title['name']?special_title['name']+'：':label+'：'"
          prop="name"
        >
          <el-input v-model="ruleForm.name" placeholder="请填写名称或姓名"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>示例：成都 XXXXX 科技有限公司/张三</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="申请人姓名：" prop="names" v-if="$store.state.picType==1">
          <el-input v-model="ruleForm.names" placeholder="请填写名称或姓名"></el-input>
        </el-form-item>
        <el-form-item
          :label="special_title['number']?special_title['number']+'：':'证件编号：'"
          prop="number"
        >
          <el-input v-model="ruleForm.number" placeholder="请填写证件号"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <!-- <span>证件编号 : 营业执照编号</span> -->
              <span>示例: 营业执照编号 : 610103100025511</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="证件号码：" prop="numbers" v-if="$store.state.picType==1">
          <el-input v-model="ruleForm.numbers" placeholder="请填写证件号"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <!-- <span>证件号码 : 身份证号码</span> -->
              <span class="ts">身份证号码 : 511325198711234300</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item class="person-type" label="证件类别：" prop="person_type">
          <el-select v-model="ruleForm.person_type" placeholder="请选择" disabled>
            <el-option
              v-for="(item,index) in options"
              :label="item.title"
              :key="index"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="special_title['site']?special_title['site']+'：':'地址信息：'" prop="site">
          <el-input v-model="ruleForm.site" placeholder="请填写地址"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <!-- <span>提醒： XX省+营业执照地址-致</span> -->
              <span>示例：四川省成都市 xxxx 栋 x 单元</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="联系人：" prop="contact">
          <el-input  v-model="ruleForm.contact" placeholder="请填写联系人"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <!-- <span>提醒： 请填写 手机号 或 座机号</span> -->
              <span>示例：张三</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="邮箱：" prop="email">
          <el-input  v-model="ruleForm.email" placeholder="请填写邮箱"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <!-- <span>提醒： 请填写 手机号 或 座机号</span> -->
              <span>示例：123456789@qq.com</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="电话号码：" prop="phone">
          <el-input @click="phonezz()" v-model.number="ruleForm.phone" placeholder="请填写电话号码"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <!-- <span>提醒： 请填写 手机号 或 座机号</span> -->
              <span>示例：13135256570</span>
            </div>
          </div>
        </el-form-item>
        <div class="inline">
          <el-form-item label="所属省份：" prop="province">
            <el-select v-model="ruleForm.province" @change="provincechange" placeholder="省份/直辖市">
              <el-option
                v-for="(item,index) in provincearr"
                :label="item"
                :value="item"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市：" prop="city">
            <el-select placeholder="市/县" v-model="ruleForm.city" @change="citychange">
              <el-option
                v-for="(item,index) in cityrr"
                :label="item.label"
                :value="item.label"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="邮政编码：" prop="postal">
          <el-input v-model="ruleForm.postal" placeholder="邮政编码"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>示例：610000</span>
            </div>
          </div>
        </el-form-item>
      </div>

      <!-- <h2 class="tle">选填项：</h2> -->
      <div class="line"></div>
      <div class="select">
        <el-form-item label="英文名称：" prop="englishName">
          <el-input v-model="ruleForm.englishName" placeholder="请填写名称"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <!-- <span>提醒：申请人若无中文名，请填写</span> -->
              <span>示例：Michael</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="法人代表：" prop="legal">
          <el-input v-model="ruleForm.legal" placeholder="企业类法人代表"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <!-- <span>提醒：申请公司，请填写公司法人</span> -->
              <span>示例：Michael</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="英文地址：" prop="englishSite">
          <el-input v-model="ruleForm.englishSite" placeholder="请填写地址"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>Xx Street xx in Beijing xx District</span>
            </div>
          </div>
        </el-form-item>
        <!--<el-form-item label="申请人国籍/地区：" prop="nationality">-->
        <!--<el-input v-model="ruleForm.nationality" placeholder="申请人国籍/地区"></el-input>-->
        <!--<div class="inform">-->
        <!--<img src="../../assets/imgs/inform.png" alt="通知" />-->
        <!--<div class="content">-->
        <!--<span>示例：中国</span>-->
        <!--</div>-->
        <!--</div>-->
        <!--</el-form-item>-->
      </div>
      <div class="btns">
        <el-button type="info" @click="outStep">上一步</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
      </div>
    </el-form>
    <!--<el-form-->
    <!--v-if="judeg"-->
    <!--:model="ruleForms"-->
    <!--:rules="rules.two"-->
    <!--:inline="false"-->
    <!--ref="ruleForms"-->
    <!--label-width="160px"-->
    <!--class="demo-ruleForm"-->
    <!--size="medium"-->
    <!--&gt;-->
    <!--<span>2</span>-->
    <!--<h2 class="tle">必填项：</h2>-->
    <!--<div class="must">-->
    <!--<el-form-item label="主体名称/申请人姓名" prop="name">-->
    <!--<el-input v-model="ruleForms.name" placeholder="请填写名称或姓名"></el-input>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="证件号码/证件编号：" prop="number">-->
    <!--<el-input v-model="ruleForms.number" placeholder="请填写证件号"></el-input>-->
    <!--</el-form-item>-->
    <!--<el-form-item class="person-type" label="证件类别：" prop="person_type">-->
    <!--<el-select v-model="ruleForms.person_type" placeholder="请选择">-->
    <!--<el-option label="身份证1" value="0"></el-option>-->
    <!--<el-option label="营业执照" value="1"></el-option>-->
    <!--</el-select>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="地址信息：" prop="site">-->
    <!--<el-input v-model="ruleForms.site" placeholder="请填写地址"></el-input>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="电话号码：" prop="phone">-->
    <!--<el-input v-model="ruleForms.phone" placeholder="请填写电话号码"></el-input>-->
    <!--</el-form-item>-->
    <!--<div class="inline">-->
    <!--<el-form-item label="所属省份：" prop="province">-->
    <!--<el-select v-model="ruleForms.province" @change="provincechange" placeholder="省份/直辖市">-->
    <!--<el-option-->
    <!--v-for="(item,index) in provincearr"-->
    <!--:label="item"-->
    <!--:value="item"-->
    <!--:key="index"-->
    <!--&gt;</el-option>-->
    <!--</el-select>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="城市：" prop="city">-->
    <!--<el-select placeholder="市/县" v-model="ruleForms.city" @change="citychange">-->
    <!--<el-option-->
    <!--v-for="(item,index) in cityrr"-->
    <!--:label="item.label"-->
    <!--:value="item.label"-->
    <!--:key="index"-->
    <!--&gt;</el-option>-->
    <!--</el-select>-->
    <!--</el-form-item>-->
    <!--</div>-->
    <!--</div>-->
    <!--<h2 class="tle">选填项：</h2>-->
    <!--<div class="select">-->
    <!--<el-form-item label="英文名称：" prop="englishName">-->
    <!--<el-input v-model="ruleForms.englishName" placeholder="请填写名称"></el-input>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="法人代表：" prop="legal">-->
    <!--<el-input v-model="ruleForms.legal" placeholder="企业类法人代表"></el-input>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="英文地址：" prop="englishSite">-->
    <!--<el-input v-model="ruleForms.englishSite" placeholder="请填写地址"></el-input>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="申请人国籍/地区：" prop="nationality">-->
    <!--<el-input v-model="ruleForms.nationality" placeholder="申请人国籍/地区"></el-input>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="邮政编码：" prop="postal">-->
    <!--<el-input v-model="ruleForms.postal" placeholder="邮政编码"></el-input>-->
    <!--</el-form-item>-->
    <!--</div>-->

    <!--<el-button type="primary" @click="submitForm('ruleForms')">下一步</el-button>-->
    <!--</el-form>-->
  </div>
</template>
<script>
import { mapState } from "vuex";
import City from "../../assets/js/city";
import urlData from "../../assets/js/urlData.json";
export default {
  data() {
    return {
      judeg: false,
      add: 0,
      provincearr: [],
      cityrr: [],
      cities: [],
        must_bus:false,
      PreShow: {},
      // alterData:{},
      ruleForm: {
        //必填
        name: "",
        number: "",
        names: "",
        numbers: "",
        person_type: 0,
        site: "",
        phone: "",

        contact:'',
        email:'',
        province: "",
        city: "",
        englishName: "",
        legal: "",
        englishSite: "",
        //        nationality: "",
        postal: 10000,
      },
      ruleForms: {
        //必填
        name: "",
        number: "",
        person_type: 0,
        site: "",
        phone: "",
          contact:"",
          email:"",
        province: "",
        city: "",
        //选填
        englishName: "",
        legal: "",
        englishSite: "",
        //        nationality: "",
        postal: 10000,
      },
      rules: {
          names: [{ required: true, message: "请填写", trigger: "blur" }],
          numbers: [
              { required: true, message: "请填写", trigger: "blur" },
              {
                  pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                  message: "你的身份证格式不正确",
                  trigger: "blur",
              },
          ],
          person_type: [
              { required: true, message: "请选择", trigger: "change" },
          ],
          site: [
              { required: true, message: "请填写", trigger: "blur" },
              // {
              //   pattern: /^((省|自治区).+(市))|(市|行政区|自治州).+(区|县).+(路|街|道|村).+号.*$/,
              //   message: "你的地址格式不正确",
              //   trigger: "blur",
              // },
          ],
          contact:[
              { required: true, message: "请填写", trigger: "blur" },
              {
                  pattern: /[\u4e00-\u9fa5]/,
                  message: "联系人只能填写中文",
                  trigger: "blur",
              },
              {min: 2, max: 5, message: "联系人长度在2到5个字符之间", trigger: "blur"}
          ],
          email:[
              { required: true, message: "请填写邮箱", trigger: "blur" },//
              {
                  pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
                  // pattern:/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)$/,
                  message: "邮箱格式不正确",
                  trigger: "blur",
              },
          ],
          phone: [
              { required: true, message: "请填写", trigger: "blur" },
              { type: "number", message: "必须为数字值" },
              {
                  pattern: /^1[34578]\d{9}$/,
                  message: "电话格式错误",
                  trigger: "blur",
              },
          ],
          postal: [
              { required: true, message: "请输入邮政编码", trigger: "blur" },
              // { type: "number", message: "必须为数字" },
              {
                  pattern: /^[1-9]{1}(\d){5}$/,
                  message: "邮编格式错误",
                  trigger: "blur",
              }
          ],
          province: [{ required: true, message: "请选择", trigger: "change" }],
          city: [{ required: true, message: "请选择", trigger: "change" }],
      },
      options: [],
      label: "主体名称", //默认名称,
      special_title: {},
    };
  },
  computed: {
    com_seclected: {
      get: function () {
        var arr = City.filter((item) => {
          if (item.label == this.ruleForm.province) {
            return item.children;
          }
        });
        // this.ruleForm.city = "市/县";
        this.cityrr = arr[0].children;
      },
    },
    ...mapState(["alterData"]),
  },
  //   this.$route.push({
  //       path:'',
  //       query:
  //   })
  methods: {

    // dianjiphone(){
    //   var phonecc = document.querySelector('.phonecc')
    //   p
    // }
    // ,
    phonezz(){
        // console.log('hhhh')
        let bd =/^1[3456789]\d{9}$/
        if(bd.test(this.ruleForm.phone)){
          alert("正确")
        }
        else{
          alert('失败')
        }
    }
    ,

    outStep() {
      this.$store.state.storeDatas = "";
      this.$emit("wp", 0, "请上传必要的证明文件");
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$store.state.judeg ? (this.judeg = true) : "";
          this.$emit("wp", 2, "请填写申请业务信息");
          this.$store.commit("storeDatas", this.ruleForm);
          this.add++;
        } else {
          //          this.$emit("wp", 2, '请填写申请业务信息');
          this.$message({
            type: "error",
            message: "请补充信息",
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    citydo() {
      City.forEach((item) => {
        this.provincearr.push(item.label);
        //this.cityrr.push(item.children[0].label)
      });
    },
    provincechange() {
      this.com_seclected;
      if(this.ruleForm.city){
          this.ruleForm.city=''
      }

    },
    citychange() {
      this.com_cyselected;
    },
      checkBus(){
          if(this.$route.query.id==1){
              //如果是注册新增营业执照必传
              this.must_bus=true
          }else{
              //如果是后续,个人时营业执照选填,身份证必传,企业时营业执照必传
              if(this.ruleForm.person_type!=1){
                  this.must_bus=true
              }else{
                  this.must_bus=false
              }
          }
      }
  },
  // watch:{
  //   $store:{
  //     handler(val,oldval){
  //       //////console.log('我是新值',val);
  //     },
  //     deep:true
  //   }
  // },
  watch: {
    'ruleForm.phone': function (val, old){
      if (val > 19999999999){
        this.ruleForm.phone = old
      }
    }
  },

  mounted() {
    if (this.$route.query.id == 23) {
      //id为23时是质权操作,有些字段需要展示不同的名字[this.$route.query.id]
      this.special_title = urlData[this.$route.query.id];
    }
    //      this.label=this.options[this.$store.state.picType]['name']
    this.options = this.mconfig.options;
    this.citydo();
    let type = this.$store.state.picType;
    //            //console.log(this.$store.state.company_card_info, 564646)
    let {
      address,
      name,
      identCode,
      repLegal,
    } = this.$store.state.company_card_info;
    if (type == 1) {
      var {
        address: addr,
        name: names,
        idnumber,
      } = this.$store.state.id_card_info;
    }

    let {
      phone,
      faRen,
      rcity,
        contact,
        email,
      rprovince,
      appNameEn, //英文名
      appAddEn, //英文地址
      //          appNat,//国籍
      postCode, //邮编

      //      }=this.$store.state.alterData.public?Object.assign(this.$store.state.alterData.public,this.$store.state.alterData.data):{}
    } = this.$store.state.alterData.public
      ? this.$store.state.alterData.public
      : {};
    this.ruleForm.name = name;
    this.ruleForm.number = identCode;
    this.ruleForm.contact = contact;
    this.ruleForm.email = email;
    this.ruleForm.site = address;
    this.ruleForm.englishName = appNameEn;
    if(rprovince){
        this.ruleForm.province = rprovince;
    }
   if(rcity){
       this.ruleForm.city = rcity;
   }
  
    this.ruleForm.phone = phone ? parseInt(phone) : null;
    this.ruleForm.legal = repLegal ? repLegal : faRen; //repLegal为识别出来的法人,如果存在就以replefal为准,如果不存在就将传过来的修改参数渲染

    this.ruleForm.englishSite = appAddEn;
    //      this.ruleForm.nationality = appNat;
    this.ruleForm.postal = postCode;
    //      ////console.log(this.$store.state.alterData,this.ruleForm,444)
    this.$nextTick(() => {
      this.ruleForm.person_type = type;
      //验证主体名称是否必填
        this.checkBus()
        if(this.must_bus){
            this.$set( this.rules,"name",[{ required: true, message: "请填写", trigger: "blur" }])
            this.$set( this.rules,"number",[
                { required: true, message: "请填写", trigger: "blur" },
            ])
        }
    });
    if (type == 1) {
      //用户地址
      this.ruleForm.names = names;
      this.ruleForm.numbers = idnumber;
      //                this.ruleForm.site = addr;
    }
    if (this.$store.state.storeDatas.province) {
      this.ruleForm = this.$store.state.storeDatas;
    }

  },
};
</script>
<style lang="less" scoped>
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  // margin-top: 100px;
  width: 100%;
  padding-right: 250px;
  .tle {
    font-size: 24px;
    color: red;
  }
  .el-form {
    width: 100%;
  }
  .must,
  .select {
    display: flex;
    position: relative;
    left: -60px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0 30px;
    // width: 1000px;
    // border: 1px solid #bbbbbb;
    border-radius: 10px;
    .inform {
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      left: 100%;
      width: 250px;
      height: 32px;
      color: #f96900;
      font-size: 10px;
      line-height: 14px;
      img {
        margin: 11px;
      }
      .content {
        display: flex;
        flex-direction: column;
        // .ts {
        //   text-indent: 3em;
        // }
      }
    }
    .el-form-item {
      width: 580px;
    }
    .inline {
      display: flex;
      .el-form-item {
        margin: 0;
        width: 290px !important;
      }
      margin-bottom: 22px;
    }
  }
  .must {
    margin-bottom: 20px;
  }
  .line {
    width: calc(100% - 280px);
    margin: 0 auto;
    height: 1px;
    border-top: 1px dashed #d9d9d9;
  }
  .select {
    margin: 20px 0;
  }
  .tle {
    list-style: none;
    margin: 40px 0 20px;
    font-size: 24px;
    & ~ .tle {
      color: #bbb;
    }
  }
}

.el-button {
  display: block;
  margin: 0 auto 80px;
}

.btns {
  display: flex;
  justify-content: center;
  .el-button {
    margin: 0 20px;
  }
  /deep/ .el-button--info {
    background: #ccc;
    border-color:#ccc
  }
}

.el-input__inner:focus {
  border-color: #ff6633;
}

.el-select /deep/ .el-input__inner:focus {
  border-color: #ff6633 !important;
}

.el-select-dropdown__item.selected {
  color: #f96900;
}

.hover {
  background-color: #fff6f0;
}

.el-select-dropdown__item:hover {
  background-color: #fff6f0;
}
</style>